<template>
    <div class="memberItem"  @click="toDetail(item)">
        <!-- <span class="photo"><img :src="baseURL + item.mainImageUrl" class="photo"></span> -->
        <image-com :src="baseURL + item.mainImageUrl" :imgStyle="{width: '4rem',height: '4rem'}"></image-com>
        <!-- <view v-show="item.isWeightingSale == true" class="weight">称重</view> -->
        <div class="content ell">
            <span class="name ell">{{item.productName}}</span>
            <div class="company">
                <span class="color33">&yen; {{item.salePrice}}/{{item.unitName}}</span>
                <div class="addSubtWrapper">
                    <div class="addSubt" @click.stop="">
                        <!-- <span class="operate" v-show="itemQty(item) > 0" @click="decreaseFn(item)">-</span> -->
                        <span class="much" v-show="itemQty(item) > 0">{{itemQty(item)}}</span>
                        <span class="operate" @click="increaseFn(item)">+</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { baseURL } from "@/api/config";
import { mapState } from "vuex";
import imageCom from "@/components/common/imageCom.vue";
export default {
    name: 'MemberItem',
    components:{
		imageCom,
	},
    props: {
        item: {
            type: Object,
            default() {
                return {};
            },
        },
        increaseFn: {
            type: Function,
            default: () => {},
        },
        decreaseFn: {
            type: Function,
            default: () => {},
        },
    },
    computed: {
        ...mapState({
            shoppingList: (state) => state.cartModule.shoppingList,
        }),
        hasItem() {
            let res = Object.keys(this.item).length > 0 ? true : false;
            return res;
        },
    },
    data () {
        return {
            baseURL,
        }
    },
    methods:{
        itemQty(item){
            let qty = 0;
            for (let i of this.shoppingList) {
                if (i.productId == item.productId) {
                    qty += i.qty;
                }
            }
            return qty;
        },
        toDetail(item){
            this.$router.push({path:'/detail',query:{id:item.productId} })
        }
    }
}
</script>
<style lang="scss" scoped>
    .memberItem{ display: flex; display: -webkit-flex;  padding: 0.5rem; border-bottom: 1px solid #ccc;
        .photo{ display: block; width: 4rem; height: 4rem; overflow: hidden; border-radius: 0.3rem;
            ::v-deep img{ object-fit: cover; }
        }
        .content{ margin-left: 0.5rem; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: space-between; -webkit-justify-content: space-between; flex: 1; -webkit-flex: 1;
            .name{ display: block; line-height: 1.5;}
            .stores{ display: inline-block; padding: 0.1rem 0.2rem; color: #ff9908; font-size: 0.6rem; border: 1px solid #ff9908; border-radius: 0.2rem; align-self: flex-start;}
            .company{  display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; line-height: 1.5;   
                .addIcon{ width: 1.2rem; height: 1.2rem; /*background: url(../images/icon/addIcon_cart.png) no-repeat;*/ background-size: cover;}
            }
            .keyWord{ color: #2b59aa; font-weight: normal;}
        }
        &:last-child{  border-bottom: none;}
    }
    .addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
        .total{ width: 4rem;}
        .addSubt{ width: 4rem; height: calc(1rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; font-size: 0.8rem; overflow: hidden; white-space: nowrap;}
        .operate{ width: 1rem; height: 1rem; line-height: 1rem;  text-align: center; cursor: pointer; color: #feb229; border: 1px solid $mainColor; border-radius: 4px;
            &:last-child{ border: 1px solid $mainColor; background-image: linear-gradient(to right,$mainColor,#ffae44); color: #fff;}
        }
        .much{ width: calc(100% - 2rem - 2px); background-color: transparent; height: 1rem; line-height: 1rem;  text-align: center; outline: none; border: none; border-radius: 0;}
    }
</style>